import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';
import 'package:imperius_insights/modules/scope/view_model_humans.dart';
import 'package:imperius_insights/portal/state/mobx/widget-state.dart';
import 'package:imperius_insights/portal/widgets/error.dart';
import 'package:imperius_insights/portal/widgets/placeable_widget.dart';
import 'package:imperius_insights/treaty/dimensions.dart';
import 'package:imperius_insights/treaty/palette.dart';
import 'package:imperius_insights/treaty/strings.dart';

class Screen extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return ScreenState();
  }
}

class ScreenState extends MobXWidgetState<Screen, ViewModel> {
  @override
  ViewModel createStore() {
    return ViewModel();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(Strings.scope_humans_select_title),
          backgroundColor: palette.theme,
        ),
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Expanded(
                child: Container(
                    color: palette.pageBackground,
                    child: RefreshIndicator(
                      onRefresh: viewModel.refresh,
                      child: PlaceableWidget(
                        indicatorState: viewModel.humans,
                        loadingWidgetBuilder: (context, indicator) {
                          return Center(
                              child: SpinKitWave(color: palette.theme, size: layoutDimensions.indicatorSize));
                        },
                        errorWidgetBuilder: (_, indicatorState) {
                          return NetworkErrorWidget(viewModel.refresh);
                        },
                        contentBuilder: (context, indicator) {
                          return ListView.builder(
                            itemBuilder: (BuildContext context, int index) {
                              final human = viewModel.humans.data[index];
                              return InkWell(
                                onTap: () => viewModel.onSelect(human),
                                child: Observer(
                                  builder: (_) {
                                    final selected =
                                        viewModel.currentSysName == human.sysName;
                                    return Container(
                                      padding: EdgeInsets.all(12),
                                      decoration: BoxDecoration(
                                        border: Border(bottom: BorderSide(width: 1, color: palette.divider)),
                                          color: selected
                                              ? palette.itemSelectedBackground
                                              : palette.itemUnselectedBackground),
                                      child: Text(human.name,
                                          style: TextStyle(
                                              color: selected
                                                  ? palette.itemSelectedForeground
                                                  : palette.itemUnselectedForeground)),
                                    );
                                  },
                                ),
                              );
                            },
                            itemCount: viewModel.humans.data.length,
                          );
                        },
                      ))),
                    ),
          ],
        ));
  }
}
